import React from "react";
import { Tag } from "antd";

export default function DepartmentOptions(props) {
  const { value } = props;
  //部门字段解析
  let depts = [];
  try {
    depts = value ? JSON.parse(value) : [];
  } catch (error) {
    console.error("无效的JSON数据:", error);
    return <div>部门组件解析异常.</div>;
  }

  return (
    <div>
      <ul
        style={{
          display: "flex",
          listStyle: "none",
          padding: 0,
          margin: 0,
          overflowX: "auto",
        }}
      >
        {depts.map((dept) => (
          <li key={dept.departmentId}>
            <Tag
              color="geekblue"
              title={dept.departmentName}
              style={{
                marginRight: "1px", //降低间距
              }}
            >
              {dept.departmentName}
            </Tag>
          </li>
        ))}
      </ul>
    </div>
  );
}
